<template>
    <div class="system">
        <div class="menu-aside">
            <li class="add-content">
                <p>{{ $t('text.addNewParentNode') }}</p>
                <n-icon :size="16" color="#4090EF" @click="handleChangeTag('add')">
                    <AddCircleOutline />
                </n-icon>
            </li>
            <li v-if="loading" style="padding:12px 20px" v-for="_ in 5">
                <n-skeleton :width="146" :height="16" :sharp="false" size="medium" />
            </li>
            <li v-else class="parent-item" v-for="(item, index) in parentDict" :key="index"
                :class="parentId === item.id ? 'active' : ''" @click="handleChangeTag('edit', item)">
                <p>{{ item.label }}</p>
            </li>
        </div>
        <addPage :parentId :parentTag @refresh="initParentDict"></addPage>
    </div>
</template>
<script setup lang="ts">
import { AddCircleOutline } from '@vicons/ionicons5';
import { getParentDict } from '@/api/backend/admin';
import { useMessage } from 'naive-ui';
import addPage from './addPage.vue';
const parentDict = reactive<Dict[]>([]);
const parentId = ref<string | null>(null);
const parentTag = ref('');
const message = useMessage();
const loading = ref(true);
const handleChangeTag = (type: string, item?: Dict) => {
    if (type === 'add') {
        parentId.value = null;
        parentTag.value = '';
    } else if (type === 'edit') {
        parentId.value = item?.id || null;
        parentTag.value = item?.tag || '';
    }
};
const initParentDict = async () => {
    try {
        loading.value = true;
        const res = await getParentDict();
        if (res.code !== 200) throw new Error(res.msg);
        parentDict.length = 0; // 清空数组
        res.data.forEach((item: Dict) => {
            parentDict.push(item);
        });
    } catch (error) {
        message.error('获取父节点失败，请稍后重试！');
    } finally {
        loading.value = false;
    }
};
initParentDict();
</script>
<style scoped lang="scss">
.system {
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 12px;
    width: 100%;
    height: calc(100vh - 30px);
    overflow-x: hidden;
    .menu-aside {
        width: 100%;
        height: 100%;
        overflow: auto;
        background: #f8f8f8;
        border-right:1px solid #d7d7d7;
        li {
            padding: 0 20px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            border-bottom: 1px solid #4090EF;
            &.active {
                background: #4090EF;
                color: #fff;
            }

            &.add-content {
                border-bottom: 1px solid #4090EF;
            }

            &.parent-item:hover {
                background: #4090EF;
                color: #fff;
            }
        }

        i {
            cursor: pointer;
        }
    }
}
</style>